<template>
<div>
   <el-table
    :data="list"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="50">
    </el-table-column>
     <el-table-column
      prop="host"
      label="站点">
    </el-table-column>
    
    <el-table-column
      prop="url"
      label="地址">
    </el-table-column>
     <el-table-column
      prop="minTime"
      width="100"
      label="最小时间">
    </el-table-column>
     <el-table-column
      prop="maxTime"
      width="100"
      label="最长时间">
    </el-table-column>
    <el-table-column
      prop="mediaTime"
      width="100"
      label="平均时间">
    </el-table-column>
    
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="viewDetail(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">处理</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <el-dialog
  center
   width="80%"
   title="错误详细" :visible.sync="dialogTableVisible">
  <el-table 
   ref="singleTable"
  
  :data="error.breadcrumbs">
    <el-table-column type="index"  ></el-table-column>
    <el-table-column property="type" label="类型"></el-table-column>
    <el-table-column property="level" label="级别" ></el-table-column>
    <el-table-column property="arguments" label="参数"></el-table-column>
    <el-table-column property="title" label="标题"></el-table-column>
    <el-table-column property="url" label="地址"></el-table-column>
    <el-table-column property="time" label="时间"></el-table-column>
  </el-table> -->
</el-dialog>
</div>
</template>

<script>
import { mapGetters,mapState, mapActions } from 'vuex'
import api from "../api";
export default {
  name: 'Ajax',
  created(){
      this.getPerformance()
  },
  computed:{
     ...mapGetters(['appKey'])
  },
  watch:{
    appKey(){
       this.getPerformance()
    }
  },
  methods:{

    getPerformance(){
        // console.log(api)
        if(!this.appKey){
           return;
        }
        api.getPerformance({
          appKey:this.appKey
        })
        .then((res)=>{
           this.list = res.data;
      })
    }
  },
  data () {
    return {
      dialogTableVisible:false,
      list:[], 
      gridData:[],  
      
    //   msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
